<template>
    <div>
        <h1>体育</h1>
        <h1>{{ num }}</h1>
        <h1>{{ age1 }}</h1>
        <h1>{{ data.name }}</h1>
        <h1>{{ data.num  }}</h1>
        <h1>{{ data.str  }}</h1>
        <h1>{{ data.student  }}</h1>
        <h1>{{ data.students  }}</h1>
        <input type="button" value="按钮" class="btn btn-primary" @click="fn">
        <input type="button" value="修改按钮" class="btn btn-primary" @click="fn1">
        <input type="button" value="ref修改按钮" class="btn btn-primary" @click="fn2">
        
    </div>
</template>

<script setup lang="ts">

    import { ref ,reactive} from 'vue'

    let num=ref(100)

    const fn=()=>{
        num.value
        console.log(num.value)
    }
     
    let age1=ref("牛奶")
    const fn2=()=>{
        age1.value="酸奶"
        
    }

    let data=reactive({
        name:'张三',
        num:100,
        str:{name:'李四',age:'20'},
        student:['喝酒','抽烟'],
        students:[
            {name:'张三',age:'21'},
            {name:'王五',age:'22'},
        ]

    })



    const fn1=()=>{
        data.name='哈哈'
        data.num=300,
        data.str.name='嘻嘻',
        data.student[0]='谈1',
        data.students[1].age='30'
    }

    
</script>

<style scoped>

</style>